<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="550px"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="80px"
        :rules="formRules"
      >
        <el-form-item label="菜单类型" prop="menuType" required>
          <el-radio-group v-model="formData.menuType">
            <el-radio :label="MenuEnum.CATALOGUE">目录</el-radio>
            <el-radio :label="MenuEnum.MENU">菜单</el-radio>
            <el-radio :label="MenuEnum.BUTTON">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="父级菜单" prop="parentId">
          <el-tree-select
            class="flex-1"
            v-model="formData.parentId"
            :data="menuOptions"
            clearable
            node-key="menuId"
            :props="{
              label: 'menuName',
            }"
            :default-expand-all="true"
            placeholder="请选择父级菜单"
            check-strictly
          />
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input
            v-model="formData.menuName"
            placeholder="请输入菜单名称"
            clearable
          />
        </el-form-item>
        <el-form-item
          v-if="formData.menuType != MenuEnum.BUTTON"
          label="菜单图标"
          prop="icon"
        >
          <icon-picker class="flex-1" v-model="formData.icon" />
        </el-form-item>

        <el-form-item
          v-if="formData.menuType == MenuEnum.MENU"
          label="路由路径"
          prop="path"
        >
          <div class="flex-1">
            <el-input
              v-model="formData.path"
              placeholder="请输入路由路径"
              clearable
            />
            <div class="form-tips">
              访问的路由地址，如：`admin`，如外网地址需内链访问则以`http(s)://`开头
            </div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="formData.menuType == MenuEnum.MENU"
          label="组件路径"
          prop="component"
        >
          <div class="flex-1">
            <el-autocomplete
              class="w-full"
              v-model="formData.component"
              :fetch-suggestions="querySearch"
              clearable
              placeholder="请输入组件路径"
            />
            <!-- <el-input v-model="formData.component" placeholder="请输入组件路径" /> -->
            <div class="form-tips">
              访问的组件路径，如：`permission/admin/index`，默认在`views`目录下
            </div>
          </div>
        </el-form-item>

        <el-form-item
          v-if="formData.menuType != MenuEnum.CATALOGUE"
          label="权限字符"
          prop="perms"
        >
          <div class="flex-1">
            <el-input
              v-model="formData.perms"
              placeholder="请输入权限字符"
              clearable
            />
            <div class="form-tips">
              将作为server端API验权使用，如`system:admin:list`，请谨慎修改
            </div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="formData.menuType == MenuEnum.MENU"
          label="路由参数"
          prop="query"
        >
          <div>
            <div class="flex-1">
              <el-input
                v-model="formData.query"
                placeholder="请输入路由参数"
                clearable
              />
            </div>
            <div class="form-tips">
              访问路由的默认传递参数，如：`{"id": 1, "name":
              "admin"}`或`id=1&name=admin`
            </div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="formData.menuType == MenuEnum.MENU"
          label="是否缓存"
          prop="isCache"
          required
        >
          <div>
            <el-radio-group v-model="formData.isCache">
              <el-radio :label="'0'">缓存</el-radio>
              <el-radio :label="'1'">不缓存</el-radio>
            </el-radio-group>
            <div class="form-tips">选择缓存则会被`keep-alive`缓存</div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="formData.menuType != MenuEnum.BUTTON"
          label="是否显示"
          prop="visible"
          required
        >
          <div>
            <el-radio-group v-model="formData.visible">
              <el-radio :label="'0'">显示</el-radio>
              <el-radio :label="'1'">隐藏</el-radio>
            </el-radio-group>
            <div class="form-tips">
              选择隐藏则路由将不会出现在侧边栏，但仍然可以访问
            </div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="formData.menuType != MenuEnum.BUTTON"
          label="是否外链"
          prop="isFrame"
          required
        >
          <div>
            <el-radio-group v-model="formData.isFrame">
              <el-radio :label="'0'">是</el-radio>
              <el-radio :label="'1'">否</el-radio>
            </el-radio-group>
            <div class="form-tips">打开外部界面</div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="formData.menuType != MenuEnum.BUTTON && formData.isFrame == '0'"
          label="外链打开方式"
          prop="targetType"
          required
          label-width="auto"
        >
          <el-select
            v-model="formData.targetType"
            class="m-2"
            placeholder="请选择外链打开方式"
            size="large"
          >
            <el-option label="新窗口" value="_blank" />
            <el-option label="当前窗口" value="_self" />
            <el-option label="父框架" value="_parent" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="formData.menuType != MenuEnum.BUTTON"
          label="菜单状态"
          prop="status"
          required
        >
          <div>
            <el-radio-group v-model="formData.status">
              <el-radio :label="'0'">正常</el-radio>
              <el-radio :label="'1'">停用</el-radio>
            </el-radio-group>
            <div class="form-tips">
              选择停用则路由将不会出现在侧边栏，也不能被访问
            </div>
          </div>
        </el-form-item>
        <el-form-item label="菜单排序" prop="menuSort">
          <div>
            <el-input-number v-model="formData.orderNum" :max="9999" />
            <div class="form-tips">数值越大越排前</div>
          </div>
        </el-form-item>
      </el-form>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import { menuLists, menuEdit, menuAdd, menuDetail } from "@/api/perms/menu";
import { getModulesKey } from "@/router";
import { MenuEnum } from "@/enums/appEnums";
import Popup from "@/components/popup/index.vue";
import feedback from "@/utils/feedback";
import { arrayToTree, treeToArray } from "@/utils/util";

const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
const popupTitle = computed(() => {
  return mode.value == "edit" ? "编辑菜单" : "新增菜单";
});

const componentsOptions = ref(getModulesKey());
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? componentsOptions.value.filter((item) =>
        item.toLowerCase().includes(queryString.toLowerCase())
      )
    : componentsOptions.value;
  cb(results.map((item) => ({ value: item })));
};

const formData = reactive({
  menuId: "",
  //父级id
  parentId: 0,
  //类型
  menuType: MenuEnum.CATALOGUE,
  //图标
  icon: "",
  //名称
  menuName: "",
  //排序号
  orderNum: 0,
  // 路由路径
  path: "",
  //权限链接
  perms: "",
  //前端组件
  component: "",

  //路由参数
  query: "",
  //是否缓存 （0缓存 1不缓存）
  isCache: "0",
  //是否显示 0显示 1隐藏
  visible: "0",
  //菜单状态（0正常 1停用）
  status: "0",
  // 是否为外链（0是 1否）
  isFrame: "1",
  targetType: "", //外链打开方式
});

const formRules = {
  parentId: [
    {
      required: true,
      message: "请选择父级菜单",
      trigger: ["blur", "change"],
    },
  ],
  menuName: [
    {
      required: true,
      message: "请输入菜单名称",
      trigger: "blur",
    },
  ],
  path: [
    {
      required: true,
      message: "请输入路由地址",
      trigger: "blur",
    },
  ],
  component: [
    {
      required: true,
      message: "请输入组件地址",
      trigger: "blur",
    },
  ],
};

//原始的菜单树数据,从列表也传入过来
const menuListTree = ref<any[]>([]);
//转换后的菜单树数据,赛选到menuType为菜单的数据
const menuOptions = ref<any[]>([]);

const handleSubmit = async () => {
  await formRef.value?.validate();
  mode.value == "edit" ? await menuEdit(formData) : await menuAdd(formData);
  popupRef.value?.close();
  feedback.msgSuccess("操作成功");
  emit("success");
};

const open = (type = "add") => {
  mode.value = type;
  popupRef.value?.open();
};

const setFormData = (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

/**
 * 获取详情
 * row:为null标识新增
 */
const getDetail = async (row: Record<string, any>, menuList: any[]) => {
  console.log("row", row);
  console.log("typeod row", typeof row);

  console.log("menuList", menuList);

  menuListTree.value = menuList;
  // 转换后的菜单树数据
  const menu: any = { menuId: 0, menuName: "顶级", children: [] };
  let trda = treeToArray(menuList).filter(
    (item) => item.menuType != MenuEnum.BUTTON
  );
  console.log("trda", trda);

  menu.children = arrayToTree(trda, {
    id: "menuId",
    parentId: "parentId",
    children: "children",
  });
  console.log("menu.children ", menu.children);

  menuOptions.value.push(menu);

  if (row != null) {
    setFormData(row);
    console.log("formdata", formData);
  }
};

const handleClose = () => {
  emit("close");
};

defineExpose({
  open,
  setFormData,
  getDetail,
});
</script>
